<template>
	<div class="containerAll discountCouponC">
		<div :class="topClass" @click="choiceCoupon">
			<p class="topP">
				<span>￥</span><span class="price">20</span>
			</p>
			<p class="bottomP">花伴商城无门槛神券</p>
		</div>
		<div :class="bottomClass" @click="detailStatus">
			<p class="bottomP">
				<span>有效期至：2018.5.20</span>
				<span class="right clearFloat">
					查看详情
					<img :src="!detail?'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/find_right_down.png':'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/find_right_up.png '"/>
				</span>
			</p>
		</div>
		<div v-show="detail" class="detail">
			<p>规则：通过手机短信验证码登陆领取，领取成功后，优惠券放至我的-我的优惠券列表</p>
		</div>
	</div>

	<!--<div class="containerAll discountCouponC">
		<div :class="topClass" @click="choiceCoupon">
			<p class="topP">
				<span>￥</span><span class="price">{{item.couponAmount|priceSplitTwo()}}</span>
			</p>
			<p class="bottomP">{{item.couponTitle}}</p>
		</div>
		<div :class="bottomClass" @click="detailStatus">
			<p class="bottomP">
				<span>有效期至：{{item.endTime|fifterTime()}}</span>
				<span class="right clearFloat">
					查看详情
					<img :src="!detail?'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/find_right_down.png':'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/find_right_up.png '"/>
				</span>
			</p>
		</div>
		<div v-show="detail" class="detail">
			<p>{{item.couponDesc}}</p>
		</div>
	</div>-->
</template>

<script>
	export default {
		props: ["topClass", "bottomClass", 'item'],
		data() {
			return {
				detail: false
			}
		},
		methods: {
			detailStatus() {
				this.detail = !this.detail;
			},
			choiceCoupon() {
				this.$emit("choiceCouponParent");
			}
		},
		filters: {
			priceSplitTwo(price) {
				if(price) {
					return price.toString().slice(0, price.toString().length - 2);
				}
				return "0";
			},
			fixedTwo(price) {
				if(price) {
					return Number(price / 100).toFixed(2);
				}
				return "0.00";
			},
			fifterTime(time) {
				if(time) {
					let timeString = '' + time;
					let pattern = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/;
					timeString = timeString.replace(pattern, '$1.$2.$3') //$4:$5:$6
					return timeString
				}
			}
		}
	}
</script>

<style lang="less" rel="stylesheet/less">
	* {
		margin: 0;
		padding: 0;
	}
	
	@fontFamily: 'PingFangSC-Regular';
	/*//清除input默认选中的状态*/
	
	input {
		outline: none
	}
	
	.left {
		float: left;
	}
	
	.right {
		float: right;
	}
	
	.clear-float {
		zoom: 1;
		&:after {
			clear: both;
			content: '';
			display: block;
			width: 0;
			height: 0;
			visibility: hidden;
		}
	}
	
	.container-all {
		font-family: fontFamily;
		background: #f2f2f2;
		min-height: 100vh;
	}
	
	.discountCouponC {
		margin-top: .3rem;
		width: 100%;
		min-height: 2.33rem;
		.topNoUsed {
			background: url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/bg.png) no-repeat 0 0;
		}
		.topUsed {
			background: url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/bg2.png) no-repeat 0 0;
		}
		.topExpire {
			background: url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/bg3.png) no-repeat 0 0;
		}
		.topNoUsed,
		.topUsed,
		.topExpire {
			height: 1.64rem;
			background-size: 100% 100%;
			color: #464646;
			font-size: .36rem;
			.topP {
				padding: .16rem .3rem 0 .3rem;
				.price {
					font-size: .72rem;
				}
			}
			.bottomP {
				margin-top: -.08rem;
				font-size: .24rem;
				padding: 0 .3rem;
			}
		}
		.bottomNoUsed {
			background: url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/ba2.png) no-repeat 0 0;
		}
		.bottomUsed {
			background: url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/bg.png) no-repeat 0 0;
		}
		.bottomExpire {
			background: url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/ba2.png) no-repeat 0 0;
		}
		.bottomNoUsed,
		.bottomUsed,
		.bottomExpire {
			height: .33rem;
			background-size: 100% 100%;
			color: #909090;
			font-size: .24rem;
			padding: .2rem .3rem;
			img {
				vertical-align: bottom;
				width: .28rem;
				height: .28rem;
			}
		}
		.detail {
			font-size: .24rem;
			border-radius: 0 0 .1rem .1rem;
			background: #FFFFFF;
			padding: 0 .3rem .2rem;
			p {
				color: #909090;
				padding-top: .18rem;
				border-top: 1px solid #F2F2F2;
			}
		}
	}
</style>